<template>
	<div>
		<div class="box">
			<div class="input1">
				<el-input-number
					v-model="num1"
					clearable
					:size="'small'"></el-input-number>
			</div>
			<div class="symbol">{{ symbol }}</div>
			<div class="input2">
				<el-input-number
					:min="num1"
					v-model="num2"
					clearable
					:size="'small'"></el-input-number>
			</div>
		</div>
	</div>
</template>

<script>
	import { computed, ref } from 'vue-demi';
	export default {
		name: '',
		components: {},
		props: {
			symbol: {
				required: false,
				default: '~',
			},
			minNumber: {
				required: false,
			},
			maxNumber: {
				required: false,
			},
		},
		setup(props, ctx) {
			console.log(props);
			let num1 = computed({
				get() {
					return props.minNumber;
				},
				set(val) {
					ctx.emit('update:minNumber', val);
				},
			});
			let num2 = computed({
				get() {
					return props.maxNumber;
				},
				set(val) {
					ctx.emit('update:maxNumber', val);
				},
			});
			return { num1, num2 };
		},
	};
</script>

<style lang="scss" scoped>
	::v-deep .el-input-number {
		max-width: none;
		.el-input-number__decrease,
		.el-input-number__increase {
			display: none;
		}
		input {
			padding: 5px;
			text-align: left;
			width: 100%;
			max-width: none;
		}
	}
	::v-deep .box {
		background-color: #fff;
		width: 100%;
		display: flex;
		align-items: stretch;
		justify-content: center;
		.symbol {
			width: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.input1,
		.input2 {
			flex: 1;
			min-width: 0;
			.el-input-number {
				width: 100%;
				input {
					border: none;
				}
			}
		}
		.input1 {
			border: 1px solid #dcdfe6;
			border-right: none;
			transition: border 0.25s;
		}
		.symbol {
			border: 1px solid #dcdfe6;
			border-left: none;
			border-right: none;
		}
		.input2 {
			border: 1px solid #dcdfe6;
			border-left: none;
			transition: border 0.25s;
			.el-input-number {
				input {
					text-align: right;
				}
			}
		}
		.input1:focus-within,
		.input2:focus-within {
			border-color: rgb(78, 164, 253);
		}
	}
</style>
